import '../assets/css/seachpage.scss'
import React, { useState, useEffect } from 'react';
import Nav from "../commonents/Nav";
import { NavLink, Outlet, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
// import axios from 'axios';
// import { indexSearch } from '../api/indexApi'
import { Input } from 'antd'
const { Search } = Input;


function SearchPage() {
    const [searchParams] = useSearchParams();
    let s = searchParams.get('s')
    let [searchVal, setSearchVal] = useState([s || '']); // 搜索框值
    // let [loading, setLoading] = useState(false);

    

    // 搜索事件函数，赋值到searchVal
    const onSearch = (val) => {
        if(val){
            setSearchVal(val)
        }
    }

    // 监控搜索框值的变化，动态传递参数
    const navigate = useNavigate();
    const location = useLocation()  // 获取当前路由路径
    useEffect(()=>{
        let authpath = location.pathname
        navigate(`${authpath}?s=${searchVal}`)
    },[searchVal,location.pathname,navigate])
    
    // const handleSearch = async (keywords,type) => {
    //     setLoading(true);
    //     try {
    //         const response = await indexSearch(keywords, type)
    //         // setSearchResult(response.data);
    //         if(type === '1'){
    //             console.log(response.data.result.songCount + '首单曲');
    //             // console.log(response.data.result.songs)
    //             setSearchResult(response.data.result.songs)

    //         }if(type === '100'){
    //             console.log(response.data.result.artistCount + '位歌手');
    //             // console.log(response.data.result.artists)
    //             setSearchResult(response.data.result.artists)
    //         }if(type === '10'){
    //             console.log(response.data.result.albumCount + '张专辑');
    //             // console.log(response.data.result.albums)
    //             setSearchResult(response.data.result.albums)
    //             // setSearchResult(response.data.result.artists)
    //         }if(type === '1014'){
    //             console.log(response.data.result.videoCount + '个视频')
    //             setSearchResult(response.data.result.videos)
    //         }if(type === '1006'){
    //             console.log(response.data.result)
    //         }if(type === '1000'){
    //             console.log(response.data.result)
    //         }if(type === '2000'){
    //             console.log(response.data.data.resources)
    //         }if(type === '1002'){
    //             console.log(response.data.result.userprofiles)
    //         }
    //     } catch (error) {
    //         console.error(error);
    //     } finally {
    //         setLoading(false);
    //     }
    // };
    return (
        <div>
            <Nav></Nav>
            <div className="searchlist" style={{marginTop: "20px"}}>
                {/* 大搜索框 */}
                <div className='search'>
                    <Search
                        placeholder="输入搜索内容"
                        enterButton="Search"
                        size="large"
                        // suffix={suffix}
                        // onChange={onChange}
                        onSearch={onSearch}
                    />
                </div>
                {/* 搜索值菜单 */}
                <ul className='searchUl'>
                    <li><NavLink to={`/search/songs?s=${searchVal}`}>单曲</NavLink></li>
                    <li><NavLink to={`/search/artists?s=${searchVal}`}>歌手</NavLink></li>
                    <li><NavLink to={`/search/albums?s=${searchVal}`}>专辑</NavLink></li>
                    <li><NavLink to={`/search/videos?s=${searchVal}`}>视频</NavLink></li>
                    <li><NavLink to={`/search/lyrics?s=${searchVal}`}>歌词</NavLink></li>
                    <li><NavLink to={`/search/playlists?s=${searchVal}`}>歌单</NavLink></li>
                    <li><NavLink to={`/search/voice?s=${searchVal}`}>声音</NavLink></li>
                    <li><NavLink to={`/search/userprofiles?s=${searchVal}`}>用户</NavLink></li>
                </ul>
                {/* 数据显示区域 */}
                <div className='displayBox'>
                    <Outlet searchVal={searchVal}/>
                </div>
            </div>
        </div>
    )
}

export default SearchPage;